﻿@{
    ViewBag.Title = "gxg";
    Layout = "~/Views/Shared/_LayoutPage1.cshtml";
}

<h2>gxg</h2>
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width" />
    <title>gxg</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <link href="~/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="~/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
    <link href="~/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->





</head>
<body>

    <div>
        <table style="padding-top:220px;margin:0 auto; width:752px" >
            <thead>
                <tr class="alert-success">
                    <th>编号</th>
                    <th>用户名</th>
                    <th>挂号时间</th>
                    <th>专家名字</th>
                    <th>用户身份证号</th>
                    <th>号牌</th>
                    <th>编辑</th>

                </tr>
            </thead>
            <tbody id="showData" class="alert-info" style="color:#ff0000"></tbody>
        </table>
    </div>
    <div style=" background-image: url('../../Content/0017030745668664_b.jpg'); width: 752px; height: 200px; margin: 0 auto">
    </div>
</body>
</html>

<script>
    $.ready(showData());
    //显示
    function showData()
    {
        $.ajax({
            url: "http://localhost:13936/actionapi/values/showRecord",
            type: "get",
            dataType: "json",
            success: function (data)
            {   var str = "";
                for (var i = 0; i < data.length; i++)
                {
                    str += " <tr>";
                str += "   <th>" + data[i].jid + "</th>";
                str += "   <th>" + data[i].uname + "</th>";
                str += "   <th>" + data[i].gdate + "</th>";
                str += "   <th>" + data[i].zname + "</th>";
                str += "   <th>" + data[i].ucard + "</th>";
                str += "   <th>" + data[i].number + "</th>";
                str += "   <th><input type='button' name='name' value='删除' id='sc' onclick='SC(" + data[i].jid + ")'class='btn btn-danger'/>";
                str += "  <input type='button' name='name' value='修改' id='xg' class='btn btn-danger'/>";
                str += "  <input type='button' name='name' value='保存' id='bc' style='display:none' class='btn btn-danger'/>";
                str += "  <input type='button' name='name' value='取消' id='qx' style='display:none' class='btn btn-danger'/>";
                str += "</th></tr>";
                }
                $("#showData").html(str);
            }
        })
    }
    //删除
    function SC(id)
    {
       alert(id)
        $.ajax({
            url: "http://localhost:13936/actionapi/values/delRecord/"+id,
            type: "delete",

            dataType:"json",
            success: function (data) {
                if (data > 0) {
                    alert('删除成功！！！');
                    showData();
                }
                else {
                    alert('删除失败！！！');
                }
            }
        })
    }

    //修改
    $(document).on("click", "#xg", function () {
        $(this).hide();//隐藏修改按钮
        $(this).siblings().eq(0).hide();//隐藏删除按钮
        $(this).siblings().eq(1).show();//显示保存按钮
        $(this).siblings().eq(2).show();//显示取消按钮
        //获取到原来的值
        var uname = $(this).parent().siblings().eq(1).html();
        var gdate = $(this).parent().siblings().eq(2).html();
        var zname = $(this).parent().siblings().eq(3).html();
        var ucard = $(this).parent().siblings().eq(4).html();
        var number = $(this).parent().siblings().eq(4).html();
        $(this).parent().siblings().eq(1).html("<input type=\"text\" oldValue=\"" + uname + "\"  value=\"" + uname + "\" />");
        $(this).parent().siblings().eq(2).html("<input type=\"text\" oldValue=\"" + gdate + "\"  value=\"" + gdate + "\" />");
        $(this).parent().siblings().eq(3).html("<input type=\"text\" oldValue=\"" + zname + "\"  value=\"" + zname + "\" />");
        $(this).parent().siblings().eq(4).html("<input type=\"text\" oldValue=\"" + ucard + "\"  value=\"" + ucard + "\" />");
        $(this).parent().siblings().eq(5).html("<input type=\"text\" oldValue=\"" + number + "\"  value=\"" + number + "\" />");
    })

    $(document).on("click", "#qx", function () {
        $(this).hide();//隐藏取消按钮
        $(this).siblings().eq(0).show();//删除按钮显示
        $(this).siblings().eq(1).show();//修改按钮显示
        $(this).siblings().eq(2).hide();//隐藏保存按钮

        var uname = $(this).parent().siblings().eq(1).children().first().attr("oldValue");
        var gdate = $(this).parent().siblings().eq(2).children().first().attr("oldValue");
        var zname = $(this).parent().siblings().eq(3).children().first().attr("oldValue");
        var ucard = $(this).parent().siblings().eq(4).children().first().attr("oldValue");
        var number = $(this).parent().siblings().eq(5).children().first().attr("oldValue");

        $(this).parent().siblings().eq(1).html(uname);
        $(this).parent().siblings().eq(2).html(gdate);
        $(this).parent().siblings().eq(3).html(zname);
        $(this).parent().siblings().eq(4).html(ucard);
        $(this).parent().siblings().eq(5).html(number);
    })
    $(document).on("click", "#bc", function () {
        var jid = $(this).parent().siblings().eq(0).html();
        alert(jid);
        var uname = $(this).parent().siblings().eq(1).children().first().val();
        var gdate = $(this).parent().siblings().eq(2).children().first().val();
        var zname = $(this).parent().siblings().eq(3).children().first().val();
        var ucard = $(this).parent().siblings().eq(4).children().first().val();
        var number = $(this).parent().siblings().eq(5).children().first().val();

        $.ajax({
            url: "http://localhost:13936/actionapi/values/updRecord",
            type: "put",
            data: { uname: uname, gdate: gdate, zname: zname, ucard: ucard, number: number, jid: jid },
            dataType: "json",
            success: function (data) {
                if (data > 0) {
                    alert('修改成功');
                    showData();
                }
                else
                {
                    alert('修改失败');
                }
            }
        })
    })
    
</script>